<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人资料</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet">
</head>
<body>
  <div style="width:90%;margin-top: 20px;">
    <form class="layui-form layui-form-pane1" lay-filter="userinfo">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" name="username" disabled class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" name="displayname" disabled class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
          <input type="text" name="rolename" disabled class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">新密码</label>
        <div class="layui-input-inline">
          <input type="password" name="newPassword" required lay-verify="required|pass" lay-reqText="密码不能为空" placeholder="请输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input type="password" name="confirmPassword" required lay-verify="required|pass" lay-reqText="密码不能为空" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" id="btnSubmit">修改密码</button>
        </div>
      </div>
    </form>
  </div>
  
<script src="js/layui.js"></script>
<script type="module">
  import account from './js/account.js'
  import roleManager from './js/role-manager.js'

  layui.use(['form','layer'], function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var userData = JSON.parse(sessionStorage.getItem("userData"));
    // 加载角色列表
    var loadRoleList = function(){
        roleManager.getRoleList($,function(rspData){
            var roleListData = rspData.data;
            $.each(roleListData,function(idx,role){
              if(role.id == userData.systemRoleId){
                form.val('userinfo', {
                  'username': userData.userName
                  ,'displayname':userData.displayName
                  ,'rolename': role.name
                });
              }
            })
            
            
        })
    }
    loadRoleList();

    form.verify({
      pass: [/(.+){6,12}$/, '密码必须6到12位']
    });

    $('#btnSubmit').on('click', function(){
      form.submit('userinfo', function(data){
        if(data.field.newPassword != data.field.confirmPassword){
          layer.msg('密码不一致', {icon: 5});
            return;
        }
        var user = { id : userData.id, newPassword : data.field.newPassword};
        // 更新密码
        account.modifyUserPassword($,user,function(rspData){
          layer.msg("更新成功");
          setTimeout(() => {
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭 
            }, 500);
        });
      });

      return false;
    });
  });
</script>
</body>
</html>